<script>
	import {
		checkOpenGPSServiceByAndroid
	} from '@/utils/device.js';
	export default {
		onLaunch: function() {
			// this.$ws.socketTask.onMessage((res) => {
			// 	let data = JSON.parse(res.data) || null;
			// 	if (data) {
			// 		let that = this;

			// 		let result = data.message || null;

			// 		if (data.code == 2) {
			// 			console.log("app");
			// 			that.talkList.push(result);
			// 			/* 本地缓存 */
			// 			uni.setStorageSync(
			// 				`chat_${uni.getStorageSync("ID")}_${result.fromId}`,
			// 				that.talkList
			// 			);
			// 			that.scrollToBottom();
			// 		}
			// 		console.log("app");
			// 	}
			// })

			//--------------------------------------------------------------------------------
			// uni.onPushMessage((res) => {
			// 	//获取到通知消息有分为点击与监听
			// 	if (res.type == "click") {
			// 		console.log('click');
			// 		clearTimeout(timer);
			// 		timer = setTimeout(() => {
			// 			console.log('settime');
			// 			// 处理跳转的业务可以写这边
			// 			if (res.data.payload) {
			// 				console.log('跳转', 'res.data.payload.url');

			// 				uni.navigateTo({
			// 					url: res.data.payload.url
			// 				})
			// 			}
			// 		}, 2000);
			// 	} else {
			// 		//aps为空说明是在线，aps有值的时候是离线，避免离线点击后再监听会出现两次通知栏
			// 		if (res.data.aps) {
			// 			return;
			// 		}
			// 		let platform = uni.getSystemInfoSync().platform;
			// 		let msg = res.data;
			// 		if (platform == 'ios') { //由于IOS 必须要创建本地消息 所以做这个判断
			// 			if (msg.payload && msg.payload != null) {
			// 				plus.push.createMessage(msg.content, msg.payload) //创建本地消息
			// 			}
			// 		}
			// 		if (platform == 'android') {
			// 			let options = {
			// 				cover: false,
			// 				sound: "system",
			// 				title: msg.title
			// 			}
			// 			plus.push.createMessage(msg.content, msg.payload, options);
			// 		}
			// 	}
			// }).
			//--------------------------------------------------------------------------------

			// uni-app客户端获取push客户端标记
			// uni.getPushClientId({
			// 	success: (res) => {
			// 		let push_clientid = res.cid
			// 		getApp().globalData.cid = push_clientid;
			// 		console.log('客户端推送标识:', push_clientid)
			// 	},
			// 	fail(err) {
			// 		console.log(err)
			// 	}
			// })

			// var t1_time = 0;

			// var t1 = setInterval(function() {
			// 	var cid = plus.push.getClientInfo().clientid;
			// 	console.log(cid != undefined, cid != "undefined", cid)
			// 	if (cid != null || cid != "null") {
			// 		console.log('client<<<<<<<<<<<<<<', cid)
			// 		uni.setStorageSync('cid', cid)
			// 		clearInterval(t1);
			// 		return
			// 	}
			// }, 130);

			// let plus = null;
			// 必须要获取到cid后才能接收推送信息
			// const cid = plus.push.getClientInfo();
			// getApp().globalData.cid = cid.clientid;
			// uni-app客户端获取push客户端标记
			// uni.getPushClientId({
			// 	success: (res) => {
			// 		let push_clientid = res.cid
			// 		console.log('客户端推送标识:', push_clientid)
			// 	},
			// 	fail(err) {
			// 		console.log(err)
			// 	}
			// })
			// plus.push.getClientInfo()；
			// 若出现获取不到cid的情况加上延时。
			// setTimeout(function() {
			// 	plus.push.getClientInfo();
			// }, 2000)
			// console.log(cid, "cid");
			// plus.navigator.closeSplashscreen();
			// return;
			// return;
			const token = uni.getStorageSync("token");
			if (token) {
				this.$store.state.isOpenSocket = true
				this.$ws.init();
				this.$store.commit('m_message/addCount')
				// #ifdef APP-PLUS
				if (plus || false) {
					plus.navigator.closeSplashscreen();
				}
				// #endif
			} else {
				uni.reLaunch({
					url: "pages/logo/logo",
					success: () => {},
				});

			}
			// #ifdef APP-PLUS
			if (plus || "") {
				plus.navigator.closeSplashscreen();
			}
			plus.navigator.closeSplashscreen();
			// #endif



		},
		onShow: function() {
			const token = uni.getStorageSync("token");



			if (!this.$store.state.isOpenSocket) {
				if (token) {
					checkOpenGPSServiceByAndroid();
					this.$ws.init();
				}
			}
		},
		onHide: function() {},
	};
</script>

<style lang="scss">
	/*unocss */
	@import "@/static/styles/generate.scss";
	@import "@/static/styles/expand.scss";
	@import "@/static/iconfont.css";



	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
	//helow uniapp 模板样式
	// @import "@/static/css/uni.css";
	//全局样式
	@import "@/static/css/global.scss";



	/* card 大小 */
	::v-deep .uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text {
		font-size: 20rpx !important;
	}

	::v-deep .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
		font-size: 30rpx !important;
	}

	::v-deep .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
		font-size: 40rpx !important;
	}



	.font-b {
		font-weight: 700;
	}

	.piccon_button {
		width: 92%;
		padding: 0 72rpx;
		margin: 64rpx 32rpx;
		font-size: 48rpx;
		line-height: 1.8;
		border-radius: 8rpx;
		border-width: 0rpx;
		background-image: linear-gradient(90deg, #07C193, #3EAAB4);
	}


	.a {
		height: 1px
	}


	.ms50 {
		margin-bottom: 100rpx;
	}

	.mt40 {
		margin-top: 80rpx;
	}

	.laBtn1 {
		width: 686rpx;
		height: 88rpx;
		// background: #a14bff;
		// background-color: #848484;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;

		.word88 {
			margin: 0 auto;
			line-height: 88rpx;
			width: 120rpx;
			// height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

	}

	.laBtn2 {
		width: 686rpx;
		height: 88rpx;
		background: #a14bff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;

		.word88 {
			margin: 0 auto;
			line-height: 88rpx;
			width: 120rpx;
			// height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}
	}


	.mr26 {
		margin-right: 26rpx;
	}

	.box-scroll {
		flex: 1;
		overflow: scroll;
		/*必须写这一条*/
		height: 1px;
	}


	.triangle {
		width: 0rpx;
		height: 0rpx;
		// border: 20rpx solid transparent;
		border: 20rpx solid transparent;
		/*以下四个样式对应四种三角形，任选其一即可实现*/
		/* border-top-color:lightseagreen; */
		/* border-left-color:lightseagreen; */
		/* border-right-color:lightseagreen; */
		border-bottom-color: #4c4c4c;
		margin-top: 20rpx;
		margin-left: 212rpx;
	}

	.fa {
		display: flex;
		align-items: center;
	}

	.c84 {
		color: #848484;
	}

	.pp10 {
		padding: 10px;
	}

	.text-center {
		text-align: center;
	}

	.serif {
		font-family: serif;
		// background-color: #08B69F;
	}

	.mr10 {
		margin-right: 20rpx;
	}

	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// 图片
	.red {
		color: red;
	}

	.jingao {
		position: fixed;
		left: 0;
		top: 0rpx;
		width: 100%;
		font-size: 30rpx;
		font-weight: 600;
		background-color: red;
		color: #fff;
		line-height: 80rpx;
		z-index: 100;
	}

	.flexline {
		display: flex;
		flex-wrap: wrap;
	}

	.nowrap {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/*每个页面公共css */
	.topmain {
		margin-top: 160rpx;
	}

	.test {
		border: 1px solid red;
	}

	.border-b {
		border-bottom: 1rpx solid #dcdcdc;
	}

	.main {
		padding: 20rpx 20rpx 0;
	}

	.bottent {
		padding-bottom: 150rpx;
	}

	.banner {
		width: 100%;
		height: 300rpx;
	}

	.h1000 {
		height: 100%;
		padding: 10px 0;
	}

	.p20 {
		padding: 200rpx 42rpx 20rpx;
	}

	/* 按钮 */
	.btn::after {
		border: none;
	}

	.btn {
		background-color: transparent;
		border-radius: 0;
		padding: 0;
	}

	.btn-up {
		border: 1px solid #ff4800;
		color: #ff4800;
		border-radius: 2px;
		font-size: 28rpx;
		width: 88rpx;
		height: 44rpx;
		line-height: 44rpx;
	}

	.btn-big {
		background-color: #f8662d;
		color: white;
		border-radius: 5px;
		font-size: 40rpx;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
	}

	.btn-bo {
		border-radius: 10rpx;
		border: 2rpx solid #ff4800;
		height: 90rpx;
		color: #ff4800;
		line-height: 90rpx;
		width: 286rpx;
	}

	.btn-he {
		border-radius: 10rpx;
		background-color: #f8662d;
		height: 90rpx;
		color: white;
		line-height: 90rpx;
		width: 286rpx;
	}

	.btn-hor {
		box-shadow: 2rpx 0 0 12rpx #ccc;
	}

	.btn-font {
		background-color: #666;
	}

	.kong {
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #666666;
	}

	.btn-db {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	/* 间隔和下划线 */
	.line {
		background-color: #f5f5f5;
		height: 20rpx;
	}

	.line50 {
		height: 100rpx;
		border-bottom: 1rpx solid #dddddd;
		font-weight: 600;
	}

	/* 内边距 */
	.p5 {
		padding: 10rpx;
	}

	.p10 {
		padding: 20rpx;
	}

	.pp20 {
		padding: 40rpx;
	}

	.p15 {
		padding: 0 30rpx;
	}

	.p20 {
		padding: 0 40rpx;
	}

	.jieshao {
		height: 80rpx;
		background-color: #fff;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		flex-wrap: wrap;

		// align-items: center;
		.jieshao-yi {
			padding: 40rpx;

			// height: 100rpx;
			image {
				width: 90rpx;
				height: 90rpx;
			}

			.jieshao-yi-wz {
				margin-top: 10rpx;
				text-align: center;
			}
		}
	}

	.wh100 {
		width: 200rpx;
		height: 200rpx;
	}

	.ma {
		border: 1rpx solid #666666;
		width: 160rpx;
		height: 60rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: white;
	}

	/* 占位 */
	.z20 {
		height: 40rpx;
	}

	.z40 {
		height: 100rpx;
	}

	.z70 {
		height: 140rpx;
	}

	.z60 {
		height: 120rpx;
	}

	.z80 {
		height: 160rpx;
	}

	/* 固定 */
	.top {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		z-index: 98;
		background-color: white;
		height: 100rpx;
	}

	.di {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		z-index: 98;
		bottom: 0rpx;
		background-color: white;
		height: 140rpx;
	}

	.padding20 {
		padding: 0 20rpx;
	}

	/* 外边距 */
	.mt5 {
		margin-top: 10rpx;
	}

	.mt6 {
		margin-top: 12rpx;
	}

	.mt10 {
		margin-top: 20rpx;
	}

	.mt15 {
		margin-top: 30rpx;
	}

	.mt20 {
		margin-top: 40rpx;
	}

	.mt30 {
		margin-top: 60rpx;
	}

	.mt40 {
		margin-top: 80rpx;
	}

	.mt50 {
		margin-top: 100rpx;
	}

	.mt100 {
		margin-top: 200rpx;
	}

	.mt200 {
		margin-top: 400rpx;
	}

	.mr5 {
		margin-right: 10rpx;
	}

	.mr10 {
		margin-right: 20rpx;
	}

	.ml5 {
		margin-left: 10rpx;
	}

	.ml10 {
		margin-left: 20rpx;
	}

	.ml15 {
		margin-left: 30rpx;
	}

	.ml20 {
		margin-left: 40rpx;
	}

	.ml25 {
		margin-left: 50rpx;
	}

	.ml30 {
		margin-left: 60rpx;
	}

	.ml100 {
		margin-left: 200rpx;
	}

	/* 宽度 */
	.w100 {
		width: 100%;
	}

	.wid6 {
		width: 12rpx;
	}

	.wid7 {
		width: 14rpx;
	}

	.wid10 {
		width: 20rpx;
	}

	.wid12 {
		width: 24rpx;
	}

	.wid14 {
		width: 28rpx;
	}

	.wid16 {
		width: 32rpx;
	}

	.wid20 {
		width: 40rpx;
	}

	.wid28 {
		width: 56rpx;
	}

	.wid38 {
		width: 76rpx;
	}

	.wid40 {
		width: 80rpx;
	}

	.wid42 {
		width: 84rpx;
	}

	.wid45 {
		width: 90rpx;
	}

	.whd55 {
		width: 110rpx;
		height: 130rpx;
	}

	.wid55 {
		width: 110rpx;
	}

	.wid60 {
		width: 120rpx;
	}

	.wid70 {
		width: 140rpx;
	}

	.wid87 {
		width: 194rpx;
	}

	.wid90 {
		width: 180rpx;
	}

	.wid100 {
		width: 200rpx;
	}

	.wid110 {
		width: 200rpx;
	}

	.wid120 {
		width: 220rpx;
	}

	.wid120 {
		width: 240rpx;
	}

	.wid130 {
		width: 260rpx;
	}

	.wid150 {
		width: 300rpx;
	}

	.wid200 {
		width: 400rpx;
	}

	// 粗
	.weight {
		font-weight: 600;
	}

	/* 高度 */
	.hei40 {
		height: 80rpx;
	}

	.hei100 {
		height: 200rpx;
	}

	.hei200 {
		height: 400rpx;
	}

	.pl18 {
		padding-left: 36rpx;
	}

	/* 字体大小 */
	.f11 {
		font-size: 22rpx;
	}

	.f12 {
		font-size: 24rpx;
	}

	.f13 {
		font-size: 26rpx;
	}

	.f14 {
		font-size: 28rpx;
	}

	.f15 {
		font-size: 30rpx;
	}

	.f16 {
		font-size: 32rpx;
	}

	.f17 {
		font-size: 34rpx;
	}

	.f18 {
		font-size: 34rpx;
	}

	.f20 {
		font-size: 40rpx;
	}

	/* 弹性布局 */

	.flex-cen {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.erduan {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.f1 {
		flex: 1;
	}

	.flex_col-left {
		width: 100rpx;
		text-align: center;
	}

	.cflex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flex4 {
		margin-bottom: 15rpx;
	}

	.flex5 {
		margin-bottom: 15rpx;
	}

	/* 颜色 */
	.c35 {
		color: #353535;
	}

	.c6 {
		color: #666666;
	}

	.cf8 {
		color: #f8662d;
	}

	.c94 {
		color: #949494;
	}

	.c {
		color: #08b69f;
	}

	.cee {
		color: #eeff00;
	}

	.cff {
		color: #ff4800;
	}

	.c80 {
		color: #808080;
	}

	.c16 {
		color: #161616;
	}

	.lu {
		background-color: #08b69f;
	}

	/* 带竖线的标题*/
	.left-line {
		background-color: #08b69f;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-red {
		background-color: red;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-huang {
		background-color: #dea65a;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-lan {
		background-color: #4f99ed;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-cheng {
		background-color: #fe8f5a;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-hai {
		background-color: #84b5e3;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-zi {
		background-color: #ec2d98;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-lu {
		background-color: #53d352;
		width: 8rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.left-title {
		color: #666;
		font-size: 35rpx;
		line-height: 48rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		flex: 1;
	}

	/* 输入框，不带多选 */
	// input {
	// 	font-size: 30rpx;
	// }

	.search {
		border: 2rpx solid #dcdcdc;
		border-radius: 32rpx;
		height: 62rpx;
		width: 100%;
		padding-left: 80rpx;
		font-size: 26rpx;
		line-height: 62rpx;
	}

	.search-icon {
		position: absolute;
		left: 70rpx;
		width: 28rpx;
	}

	/* uni单选框 */
	uni-radio .uni-radio-input {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #08b69f;
	}

	uni-checkbox .uni-checkbox-input {
		border: 2rpx solid #08b69f;
	}

	/* 输入框,待多选 */
	.searchs {
		border: 2rpx solid #dcdcdc;
		border-radius: 32rpx;
		height: 62rpx;
		font-size: 26rpx;
		line-height: 62rpx;
		flex: 1;
		padding-left: 80rpx;
	}

	.search-icons {
		width: 28rpx;
		position: absolute;
		left: 70rpx;
		width: 28rpx;
	}

	checkbox.boxs {
		width: 44rpx;
		height: 44rpx;
		margin: 0 10rpx 0 15rpx;
	}

	.h100 {
		height: 100%;
	}

	.hospital {
		padding: 10rpx 30rpx;
	}

	.hos-border {
		height: 150rpx;
		border-bottom: 1rpx solid #dcdcdc;
		padding-bottom: 20rpx;
	}

	/* 圆角 */
	.br5 {
		border-radius: 10rpx;
		height: 200rpx;
	}

	.br50 {
		border-radius: 50%;
	}

	/* 对齐左边宽度55的头像 */
	.wid55-cen {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 110rpx;
	}

	/* 文字对齐*/
	.t-cen {
		text-align: center;
	}

	.t-rig {
		text-align: right;
	}

	.t-lef {
		text-align: left;
	}

	//图片胡
	image {
		// will-change: transform;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
	}

	.search-icon {
		position: absolute;
		left: 70rpx;
		width: 28rpx;
	}

	/*flex布局*/
	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/*文本截取*/
	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 公用样式 */
	/* 首行高度 */
	.h44 {
		height: 88rpx;
	}

	/* 带竖线的标题*/
	.left-line {
		background-color: #7976e9;
		width: 6rpx;
		height: 32rpx;
		border-radius: 6rpx;
	}

	.left-title {
		color: #353535;
		font-size: 35rpx;
		line-height: 48rpx;
		font-weight: 500;
		flex: 1;
	}

	/* 三角形 */
	.triangle_l {
		width: 0;
		height: 0;
		border-right: 12rpx solid #7976e9;
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	.triangle_r {
		width: 0;
		height: 0;
		border-left: 12rpx solid #7976e9;
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	/* 外边距 */
	.ml10 {
		margin-left: 20rpx;
	}

	.ml5 {
		margin-left: 10rpx;
	}

	.mr5 {
		margin-right: 10rpx;
	}

	.mr10 {
		margin-right: 20rpx;
	}

	.mr20 {
		margin-right: 40rpx;
	}

	.mr30 {
		margin-right: 60rpx;
	}

	.mr80 {
		margin-right: 160rpx;
	}

	/* 下边距 */
	.ms6 {
		margin-bottom: 12rpx;
	}

	.ms10 {
		margin-bottom: 20rpx;
	}

	.ms13 {
		margin-bottom: 26rpx;
	}

	.ms15 {
		margin-bottom: 30rpx;
	}

	.ms17 {
		margin-bottom: 34rpx;
	}

	.ms20 {
		margin-bottom: 40rpx;
	}

	/* 上边框 */
	.mt10 {
		margin-top: 20rpx;
	}

	.mt8 {
		margin-top: 16rpx;
	}

	.mt6 {
		margin-top: 12rpx;
	}

	.mt13 {
		margin-top: 26rpx;
	}

	.mt18 {
		margin-top: 36rpx;
	}

	/* padding */
	.pd10 {
		padding: 20rpx;
	}

	/* 间隙 */
	.line {
		background-color: #f5f5f5;
		height: 20rpx;
	}

	/* 左右margin */
	.margin {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	/* flex */

	.flexflex {
		display: flex;
	}

	.flex_sola {
		display: flex;
		align-items: center;
	}

	.flex-wrap {
		display: flex;
		// align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.flex-cen {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.erduan {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.f1 {
		flex: 1;
	}

	.cflex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flexColumn {
		display: flex;
		flex-direction: column;
	}

	.flex4 {
		width: 25%;
		margin-bottom: 34rpx;
	}

	.flex5 {
		width: 20%;
		margin-bottom: 15rpx;
	}

	.flex3 {
		width: 33.333%;
		// margin-bottom: 15rpx;
	}

	.flex {
		display: flex;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		flex-grow: 1;
	}

	// .flex_row .flex_grow{flex-grow: 1;}

	.flex-align {
		display: flex;
		align-items: center;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.flex-start {
		display: flex;
		justify-content: flex-start;
	}

	.flex-around {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.flex-between {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.flex-cen {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.flex-evenly {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
</style>